<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function doAdd(){
            var mydiv=document.getElementById("mydiv");
            //循环创建5个按钮
            for(var i=1;i<=5;i++){
                var input=document.createElement("input");
                input.type="button";
                input.value="按钮";
                input.onclick=function(){//为每一个按钮绑定事件
                    console.log("您点击了第"+i+"个按钮");
                };
                mydiv.appendChild(input);
            }
        }
        //方式一：
        //创建一个按钮的功能
        function createButton(n){
            var input=document.createElement("input");
            input.type="button";
            input.value="按钮";
            input.onclick=function(){//为每一个按钮绑定事件
                console.log("您点击了第"+n+"个按钮");
            };
            return input;
        }
        function doAdd2(){
            var mydiv=document.getElementById("mydiv");
            for(var i=1;i<=5;i++){
               var btn=createButton(i);//调用创建按钮的函数并且将返回值赋值给btn
               mydiv.appendChild(btn);
            }
        }

        //方式二：为元素附加属性，用来存储变量值
        function doAdd3(){
            var mydiv=document.getElementById("mydiv");
            //循环创建5个按钮
            for(var i=1;i<=5;i++){
                var input=document.createElement("input");
                input.type="button";//input的类型
                input.value="按钮";//input的value值
                input.num=i;//为元素添加num属性，用来存储对应的num属性值
                input.onclick=function(){//为每一个按钮绑定事件
                    console.log("您点击了第"+this.num+"个按钮");
                };
                mydiv.appendChild(input);
            }
        }
        // 方式三：使用let来定义变量
        function doAdd4(){
            var mydiv=document.getElementById("mydiv");
            //循环创建5个按钮
            // 使用let声明变量,形成一个暂时性死区
            for(let i=1;i<=5;i++){
                var input=document.createElement("input");
                input.type="button";
                input.value="按钮";
                input.onclick=function(){//为每一个按钮绑定事件
                    console.log("您点击了第"+i+"个按钮");
                };
                mydiv.appendChild(input);
            }
        }
       
    </script>
</head>
<body>

    <!-- 点击按钮一次，div出现5个按钮，5个按钮的value值是：按钮，当点击的对应的按钮的时候，会在控制台输出您点击了第几个按钮 -->
    <input type="button" value="向div中一次性添加5个按纽" onclick="doAdd4()">
    <div id="mydiv">
        
    </div>
</body>
</html>